import React from 'react';
import { render } from 'react-dom';
import { List, Card, Input } from 'antd';
import { WebTool } from '../lib/webtool';
import { ItemDetailView } from './itemDetailView';

const { Search } = Input;
const element = document.getElementById('root');

let itemId = WebTool.getQueryVariable('itemId');
export class SuggestComponent extends React.Component {
    state = {
        data: [
        ],
        total: 1000,
        pageIndex: 1,
        pageSize: 16,
        search: '',
        searching: false,
        isLogin: false
    };
   
    constructor(props) {
        super();
    }

    componentDidMount() {
        this.getItems(1, 16);
    }

    getItems = () => {
        this.setState({ searching: true });
        WebTool.get(`/suggest/getSuggestItems?itemId=${itemId}&pageIndex=${this.state.pageIndex}&pageSize=${this.state.pageSize}&search=${encodeURIComponent(this.state.search)}`, json => {
            let list = json.list;

            this.setState({
                data: list,
                total: json.total,
                searching: false
            });
        });
    }

    pageChange = (pageIndex, pageSize) => {
        this.state.pageIndex = pageIndex;
        this.state.pageSize = pageSize;
        this.getItems();
    };

    search = (search) => {
        this.state.search = search; 
        this.getItems();
    };

    render() {
        const { data } = this.state;
        return (
            <div style={{ marginTop: "20px" }}>
                <h2 style={{textAlign:"center"}}>Suggest Swap</h2>
                <Search
                    placeholder="input search text to search item name"
                    enterButton="Search"
                    size="large"
                    onSearch={value => this.search(value)}
                    disabled={this.state.searching}
                />
                <List style={{ marginTop: "20px" }}
                    grid={{
                        gutter: 16,
                        xs: 1,
                        sm: 2,
                        md: 4,
                        lg: 4,
                        xl: 8,
                        xxl: 8,
                    }}
                    dataSource={data}
                    loading={this.state.searching}
                    pagination={{
                        total: this.state.total,
                        onChange: this.pageChange,
                        pageSize: 16,
                    }}
                    renderItem={item => (
                        <List.Item>
                            <Card title={item.name}>
                                <ItemDetailView itemData={item} suggestItemId={itemId} isLogin={true} previewImage={item.photo || item.thumbnail} thumbnail={item.thumbnail}></ItemDetailView>
                            </Card>
                        </List.Item>
                    )}
                />
            </div>
        )
    };
}


render(<SuggestComponent />, element);